<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>订单详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="../assets/css/amazeui.min.css?v=2.9">
    <link rel="stylesheet" href="../assets/css/style.css?v=2.3">
    <link rel="stylesheet" href="../assets/css/index.css?v=2.3">
    <link rel="stylesheet" href="../assets/css/extend.css?v=2.3">
    <link rel="stylesheet" href="../assets/css/icons.css?v=2.3">
</head>
<body class="bg-gray">
<!--<header data-am-widget="header" class="am-header am-header-default am-header-fixed ">

    <div class="am-header-left am-header-nav">
        <a onclick="history.go(-1)" class="widht-10s">
            <i class="icon_8"></i>
        </a>
    </div>
    <h1 class="am-header-title">
        订单详情
    </h1>

</header>-->
<div id="orderDetail" v-cloak>
    <section class="" id="amz-main" data-tag="css-nav">

        <div class="am-g am-benj-prou">
            <div class="bg-white font-14 prelative am-listborder-shadow">
                <div class="product-box">
                    <p class="margin-bottom0"><img v-bind:src="orderDetail.offer_img" style="height: 100px"></p>
                    <div class="useritem    box am-padding-left-sm am-padding-top-sm am-padding-bottom-sm am-padding-right-sm ">
                        <div class="box-1 ">
                            <div class="font-color-2 font-16">{{orderDetail.offer_name}}</div>
                            <div class="font-color-2 font-14 font-color-monney">￥{{orderDetail.offer_price}}</div>
                        </div>

                    </div>

                </div>
            </div>
        </div>

        <div class="bg-white am-padding-left-sm am-padding-right-sm am-margin-top-sm font-16">
            <div  class="box border-bottom  am-padding-top-sm am-padding-bottom-sm">
                <div class="box-1 "> <i class="icon-buy"></i><span class="font-color-main">购买信息</span></div>
            </div>

            <div  class="box border-bottom  am-padding-top-sm am-padding-bottom-sm">
                <div class="box-1 ">数量</div>
                <div class="font-color-1">
                    {{orderDetail.offer_num}}
                </div>
            </div>
            <div  class="box  border-bottom am-padding-top-sm am-padding-bottom-sm prelative">
                <div class="box-1 ">姓名</div>
                <div class=" font-color-1">
                    {{orderDetail.link_man}}
                </div>
            </div>
            <div class="box border-bottom  am-padding-top-sm am-padding-bottom-sm prelative">
                <div class="box-1 ">手机号码</div>
                <div class=" font-color-1">
                    {{orderDetail.link_phone}}
                </div>
            </div>

        </div>
        <div class="bg-white am-padding-left-sm am-padding-right-sm am-margin-top-sm font-16">
            <div  class="box border-bottom  am-padding-top-sm am-padding-bottom-sm">
                <div class="box-1 "> <i class="icon-order1"></i><span class="font-color-main">订单信息</span></div>
            </div>

            <div  class="box border-bottom  am-padding-top-sm am-padding-bottom-sm">
                <div class="box-1 ">订单编号</div>
                <div class="font-color-1">
                    {{orderDetail.order_nbr}}
                </div>
            </div>
            <div  class="box  border-bottom am-padding-top-sm am-padding-bottom-sm prelative">
                <div class="box-1 ">下单时间</div>
                <div class=" font-color-1">
                    {{timestampToTime(orderDetail.create_time)}}
                </div>
            </div>
            <div class="box border-bottom  am-padding-top-sm am-padding-bottom-sm prelative">
                <div class="box-1 ">订单状态</div>
                <div class=" font-color-1">
                    {{statusFormat(orderDetail.status)}}
                </div>
            </div>


        </div>

    </section>

    <footer data-am-widget="navbar" class="am-navbar am-cf am-navbar-default ">
        <ul class="am-navbar-nav am-cf am-avg-sm-2 am-padding-left-0 am-padding-right-0 ">
            <li>
                <a class="bg-white font-color-2 font-15 line-51 am-text-left am-padding-left-sm">

                    <span class="font-color-2 font-color-monney">￥{{orderDetail.total_price}}</span>
                </a>

            <li>
                <a  class="am-bg-blue font-color-white font-15 line-51">
                    {{statusFormat(orderDetail.status)}}
                </a>
            </li>
        </ul>
    </footer>
</div>
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/amazeui.min.js"></script>
<script src="../assets/js/vue2.2.2.min.js"></script>
<script src="../assets/common.js"></script>
<link rel="stylesheet" href="../assets/js/layui/css/layui.css">
<script type='text/javascript' src='../assets/js/layui/layui.js'></script>

<script>
    var orderid=getQueryString("orderid");
    var mask;
    var recount=0;//刷新次数
    layui.use('layer', function(){
        var layer = layui.layer;
    });
    $(function(){
        setTimeout(function(){
            mask = layer.msg('正在加载', {icon: 16});
            //获取用户信息
            $.ajax({
                type: 'get',
                url: baseUrl+'v3.0/Circle/OrderDetail/'+orderid,
                contentType:'application/json',
                success: function (data) {
                    layer.close(mask);
                    //注册vue
                    new Vue({
                        el:"#orderDetail",
                        data:{
                            orderDetail:data
                        },
                        methods: {
                            timestampToTime:function(timestamp){
                                return timestampToTime(timestamp)
                            },
                            statusFormat:function(type){
                                if (type==0)
                                    return "未支付"
                                return "已支付"
                            }
                        }


                    })
                }
            });
        },200)

    })
</script>
</body>
</html>